<template>
  <view class="feedback-wrap">
    <back :back-title="backTitle"></back>
    <view class="info-wrap">
      <view class="title">反馈内容：</view>
      <textarea class="textarea" placeholder="请输入内容" v-model="content" maxlength="-1" @focus="handleChangeButton"></textarea>
      <view class="phone">
        <view class="phone-title">联系电话：</view>
        <input type="text" placeholder="请输入联系电话" @focus="handleChangeButton">
      </view>
			<view class="button-wrap" v-if="!showButton">
				<common-button :btn-title="btnTitle" @submit="handleSubmit"></common-button>
			</view>
    </view>
  </view>
</template>

<script>
import commonButton from '../../components/button/index'
export default {
  name: 'feedback',
  components:{ 
    commonButton
  },
  data() {
    return {
      backTitle: '帮助与反馈',
			btnTitle: '提交',
			content: '',
			height: 0,
			showButton:false
    }
  },
	onLoad() {
		const _this = this
		uni.getSystemInfo({
			success(res){
				_this.height = res.windowHeight
			}
		})
	},
	onReady() {
		const _this = this
		uni.onWindowResize((res) => {
			_this.showButton = res.size.windowHeight < _this.height
		})
	},
	onHide(){
		uni.offWindowResize(()=>{})
	},
	methods: {
		handleSubmit() {
			const flag = this.validity()
			if (flag) {
				uni.showToast({
					title: '提交成功',
					duration: 3000,
					success(){
						setTimeout(()=>{
							uni.navigateBack({})
						},2000)
					}
				})
			}
		},
		validity() {
			const {content} = this
			if (content === '') {
				uni.showToast({
					title: '内容不能为空',
					icon: 'none'
				})
				return false
			}
			return true
		},
		handleChangeButton() {
			this.showButton = true
		}
	}
}

</script>
<style lang='scss' scoped>
.feedback-wrap{
  width: 100%;
  height: 100vh;
  .info-wrap{
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;
    .title{
      font-size: 30upx;
      color: #999;
      line-height: 40upx;
      margin-bottom: 50upx;
      margin-left: 20upx;
    }
    .textarea{
      height: 750upx;
      color: #333;
      line-height: 50upx;
      font-size: 30upx;
      margin-left: 20upx;
    }
  }
  .phone{
    width: 100%;
    display: flex;
    height: 114upx;
    align-items: center;
    border-top: 1px solid #e1e1e1;
    .phone-title{
      font-size: 30upx;
      color:#333;
      margin-right: 20upx;
    }
    input {
      flex: 1;
      height: 100%;
      color: #333;
      font-size: 30upx;
    }
  }
}
.button-wrap{
	position: fixed;
	bottom: 52upx;
	left: 0;
	padding: 0 20upx;
	box-sizing: border-box;
	width: 100%;
}
</style>